<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['对公账户管理', '服务费账单管理']"
      icon="fa fa-smile-o"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>服务费账单管理</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="top_module">
                  <span class="module_text">项目名称</span>
                  <div class="s_hover_box">
                    <select class="select2" id="companySelect">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_companySelect()">x</div>
                  </div>
                </div>

                <div class="top_module" [ngClass]="{ displayNone: !searchCarParam.companyId }">
                  <span class="module_text">账户名称</span>
                  <div class="s_hover_box">
                    <select class="select2" id="accountSelect">
                      <option value=""></option>
                    </select>
                    <div class="s_del_icon" (click)="del_accountSelect()">x</div>
                  </div>
                </div>
                <div class="top_module top_module_box">
                  <span class="module_text">账单月份</span>
                  <input
                    type="text"
                    class="module_inp top_module_select form-control"
                    id="startTimePicker"
                    autocomplete="off"
                    [(ngModel)]="searchCarParam.month"
                    placeholder="时间"
                  />
                </div>
                <div class="top_module top_module_box">
                  <span class="top_module_label module_text">结算状态</span>
                  <select
                    class="top_module_select"
                    name="status"
                    [(ngModel)]="searchCarParam.status"
                    style="width: 100px"
                  >
                    <option value="">全部</option>
                    <option value="0">未结算</option>
                    <option value="1">未结清</option>
                    <option value="2">已结清</option>
                  </select>
                </div>

                <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                <button type="button" class="btn btn-primary" (click)="oneKeyChange()">{{ btnText }}</button>
              </div>
            </div>
            <div class="table_scroll">
              <table class="display dataTables responsive table table-bordered table-hover dataTable s_h5_table">
                <thead>
                  <tr>
                    <th>项目名称</th>
                    <th>账户名称</th>
                    <th>账单月份</th>
                    <!-- <th>续费应到期车辆数</th> -->
                    <th>已续费车辆数</th>
                    <th>续费应付款金额</th>
                    <th>续费已到账车辆数</th>
                    <th>续费已到账金额</th>
                    <th>续费未到账车辆数</th>
                    <th>续费未到账金额</th>
                    <th>结算状态</th>
                    <!-- <th>创建时间</th>
                    <th>更新时间</th> -->
                  </tr>
                </thead>
                <tbody>
                  <!-- 递归遍历 可以平级 直接展示与隐藏即可-->
                  <!-- 平级 状态标志 noShow-->
                  <tr
                    *ngFor="let row of tableData"
                    [ngClass]="{
                      'alert-flag': row.alertFlag,
                      active: row.isTop
                    }"
                    [ngStyle]="{
                      'background-color': row.isTop ? '#bddcf3!important' : '',
                      display: row.noShow ? 'none' : ''
                    }"
                  >
                    <td
                      [ngStyle]="{
                        'padding-left': row.level * 25 + 10 + 'px',
                        cursor: row.childNode && row.childNode.length > 0 ? 'pointer' : ''
                      }"
                      (click)="row.childNode && row.childNode.length > 0 ? openTr(row) : ''"
                    >
                      <!-- 是否展示展开的按钮 -->
                      <span
                        class="arrowIcon"
                        *ngIf="row.childNode && row.childNode.length > 0"
                        style="color: #000 !important; font-size: 15px; margin-right: 6px"
                      >
                        <i
                          [ngClass]="{
                            'fa fa-caret-right': true,
                            down: row.isShowChild
                          }"
                          aria-hidden="true"
                        ></i>
                        <!-- <i *ngIf="row.isShowChild" class="fa fa-caret-down" aria-hidden="true"></i>  -->
                      </span>
                      <i class="fa fa-home" *ngIf="row.isTop"></i>
                      {{ row.text }}
                    </td>
                    <td>
                      {{ row.detailMsg.accountName }}
                    </td>
                    <td>
                      {{ row.detailMsg.month }}
                    </td>
                    <!-- <td>
                      {{ row.detailMsg.allcarNum }}
                    </td> -->
                    <td
                      [ngStyle]="{
                        color: '#1A6DDD',
                        cursor: row.canEdit ? 'pointer' : ''
                      }"
                      (click)="jumpPageAccount('/system/bill-details', row)"
                      [title]="row.canEdit ? '点击编辑' : ''"
                    >
                      {{ row.detailMsg.renewAllCarNum }}(账单明细)
                    </td>
                    <td>
                      {{ row.detailMsg.renewAllPrice }}
                    </td>
                    <td>
                      <button (click)="jumpPage('/system/billing-details', row, '1')">
                        {{ row.detailMsg.renewFinishCarNum }}(结算明细)
                      </button>
                    </td>
                    <td>
                      {{ row.detailMsg.renewFinishPrice }}
                    </td>
                    <td>
                      <button (click)="jumpPage('/system/billing-details', row, '0')">
                        {{ row.detailMsg.renewNoFinishCarNum }}(结算明细)
                      </button>
                    </td>
                    <td>
                      {{ row.detailMsg.renewNoFinishPrice }}
                    </td>
                    <td>{{ statusList[row.detailMsg.status] }}</td>
                    <!-- <td>{{ row.detailMsg.createTime }}</td>
                    <td>
                      {{ row.detailMsg.updateTime }}
                    </td> -->
                  </tr>
                </tbody>
              </table>
            </div>
            <div style="height: 60px; line-height: 60px; text-align: center; color: #ccc">
              <span *ngIf="tableData.length > 0">共{{ tableData.length }}条数据</span>
              <span *ngIf="tableData.length == 0">暂无数据</span>
            </div>
            <!--<div class="table-fix clearfix">
            <paginator [totalRecords]="totalCount"
                     [rows]="pageSize"
                     [currentPage]="curPage - 1"
                     (onPageChange)="paginate($event)">
            </paginator>
            <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
          </div>-->
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
</div>
<style type="text/css">
  .picture {
    min-height: 100px;
    width: 100%;
    height: auto;
  }

  .alert-flag td {
    color: red !important;
  }

  .arrowIcon .fa-caret-right {
    transition: all 0.3s;
  }
  .arrowIcon .fa-caret-right.down {
    transform: rotate(90deg);
  }
  .displayNone {
    display: none;
  }
</style>
